<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="container">
    <div class="inner">
      <img class="logo" src="@/assets/images/logo100_50.svg" @click="gotoGuanwang" />
      <div class="content" v-if="!init_success">
        <div class="title">欢迎使用</div>
        <el-alert :closable="false" :center="false"
          title="欢迎安装使用“友得云客”房产小程序，您需要填写以下基本信息，来开始使用业界领先的、功能强大的房产营销获客小程序系统。您无需担心填错，这些信息以后可以再次修改。" type="warning"
          style="margin-bottom: 15px">
        </el-alert>
        <el-form label-position="top" size="small">
          <el-form-item label="*管理员（电子邮箱）">
            <el-input v-model="email" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="*密码">
            <el-input v-model="init_password" show-password placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="*再次输入密码">
            <el-input v-model="init_retype_password" show-password placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="*小程序名称">
            <el-input v-model="xcx_name" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="*业务类型">
            <el-checkbox-group v-model="business_type">
              <el-checkbox v-for="(item, key) in businessTypes" :key="key" :label="item.value"
                :disabled="item.name == '二手房（租/售）' ? false : true">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="*正版授权码">

            <el-input  v-model="license_key" placeholder="请输入授权码以激活正版授权">
              <template slot="suffix">
                <div class="license-label">
                  <a class="left" href="https://www.youdeyunke.com/buy.html" target="_blank">购买授权</a>
                  <div class="mid"></div>
                  <a class="right" href="https://work.weixin.qq.com/kfid/kfc8a0f8817daf2ec01" target="_blank">申请试用</a>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <el-button style="width: 100%" @click="initData" type="primary" :disabled="buttonDisable"
            :loading="loading">确定</el-button>
        </el-form>
      </div>
      <div class="content success" v-if="init_success">
        <el-result icon="success" title="安装完成" subTitle="令人愉悦的完整过程已经完成！接下来您需要先登录管理后台，并使用友得云客全新研发的可视化小程序界面设计器进行页面搭建，尽情发挥您的创意吧。">
          <template slot="extra">
            <el-button style="width: 100%" @click="gotoLogin" type="primary">进入管理后台</el-button>
          </template>
        </el-result>

      </div>
    </div>
    <a class="link" href="https://www.youdeyunke.com/" target="_blank">优得（西安)信息科技有限公司&nbsp;版权所有</a>
  </div>
</template>

<script>
import { initConfig } from "@/api/init.js";
import { getMyconfigs } from "@/api/weapp";
export default {
  name: "init",
  data() {
    return {
      xcx_name: "",
      email: "",
      init_password: "",
      init_retype_password: "",
      license_key: "",
      // business_type: "",
      loading: false,
      businessTypes: [
        {
          name: "新房",
          value: "xinfang",
        },
        {
          name: "二手房（租/售）",
          value: "ershoufang",
        },
      ],
      business_type: ["xinfang"],
      init_success: false,
    };
  },
  mounted() {
    this.loadConfig();
  },
  computed: {
    buttonDisable() {
      if (!this.xcx_name) {
        return true;
      }
      if (!this.email) {
        return true;
      }
      if (!this.init_password) {
        return true;
      }
      if (!this.init_retype_password) {
        return true;
      }

      return false;
    },
  },
  methods: {
    initData() {
      this.loading = true;
      var data = {
        xcx_name: this.xcx_name,
        email: this.email,
        init_password: this.init_password,
        init_retype_password: this.init_retype_password,
        business_type: this.business_type.join(","),
        license_key: this.license_key,
      };
      const regex = /.*@.*\..*/;

      if (data.xcx_name.length <= 3) {
        this.$message.warning("小程序名称字符串长度需大于3");
        this.loading = false;
        return;
      }
      if (!regex.test(data.email)) {
        this.$message.warning("请输入正确邮箱地址");
        this.loading = false;
        return;
      }
      if (data.init_password.length <= 6 || data.init_password.length >= 12) {
        this.$message.warning("密码长度需要大于6小于12");
        this.loading = false;
        return;
      }
      if (
        data.init_retype_password.length <= 6 ||
        data.init_retype_password.length >= 12
      ) {
        this.$message.warning("二次确认密码长度需要大于6小于12");
        this.loading = false;
        return;
      }
      if (data.init_password !== data.init_retype_password) {
        this.$message.warning("两次输入密码不同");
        this.loading = false;
        return;
      }
      const pattern = /^[0-9A-Z]{4}-[0-9A-Z]{4}-[0-9A-Z]{4}-[0-9A-Z]{4}$/;

      if(!data.license_key || data.license_key.length != 19){
        this.$message.error("授权码长度错误");
        this.loading = false;
        return;
      }

        if (!pattern.test(data.license_key)) {
          this.$message.warning("授权码格式错误");
          this.loading = false;
          return;
        }

      initConfig(data).then((resp) => {
        var _this = this;
        this.loading = false;
        if (resp.code != 0) {
          return;
        }
        this.$message.success("设置成功");
        this.init_success = true;
        // setTimeout(() => {
        //   _this.$router.push("/login");
        // }, 2000);
      });
    },
    loadConfig: function () {
      this.loading = true;
      getMyconfigs().then((resp) => {
        this.myconfigs = resp.data;
        this.loading = false;
        // 如果系统已初始化，则直接跳到登录页面
        if (resp.data.server_init) {
          this.$router.push("/login");
        }
      });
    },
    gotoLogin() {
      this.$router.push("/login");
    },
    gotoGuanwang() {
      // 前往产品官网
      window.open('https://www.youdeyunke.com/')
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  background-color: #f9f9f9;
  min-height: 100%;
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.inner {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 200px;
  margin-bottom: 20px;
  cursor: pointer;
}

.content {
  width: 600px;
  /* height: 840px; */
  padding: 50px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 8px 8px 11px 0 rgba(211, 218, 224, 0.5);
}

.success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.title {
  font-size: 30px;
  margin-bottom: 20px;
}

.license-label {
  display: flex;
  align-items: center;
}

.license-label .left {
  color: #ca9342;
}

.license-label .right {
  color: #42911e;
}

.license-label .mid {
  height: 14px;
  width: 1px;
  background-color: #e6e6e6;
  margin: 0 5px;
}

.link {
  width: 100%;
  text-align: center;
  /* bottom: 10px;
  position: fixed; */
  display: block;
  font-size: small;
  color: #999;
  padding: 30px 0 20px 0;
}
</style>
